<template>
  <div class="topBox">
    <div class="topBox__title" :username="username">你好~ {{ username }}</div>
    <div class="topBox__text">
      <p>DEEPCODE工作室招新系统分为小程序端和后台管理端，这里是后台管理界面， 点击左侧菜单可以切换到对应的页面，本系统包含了招新的全部流程。</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const username = localStorage.getItem('username') as string
    return {
      username
    }
  }
})
</script>

<style lang="less" scoped>
.topBox {
  padding: 35px 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  &__title {
    font-size: 30px;
    font-weight: bold;
    padding: 15px 20px;
  }
  &__text {
    color: #999;
    padding: 0 20px;
    font-size: 18px;
    line-height: 30px;
  }
}
</style>
